<script setup lang="ts">
import { onMounted, ref, reactive, onUnmounted } from 'vue';
import { Global } from "../../Global";
import { HttpHelper } from "../../lib/HttpHelper";
import { ElTable, ElForm } from 'element-plus';
import { SystemUsersHelper } from '../../lib/SystemUsersHelper';
import Pagination from '@/components/Pagination.vue';

const isLoading = ref(false);
const listDatas = ref(<any[]>[]);
const pageNumber = ref(1);
const servicePath = "/CoreOperationLog";
const total = ref(0);
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<any[]>([]);
const users = ref();

const searchData = reactive({

  Time: null,
  UserId: null,
  Controller: null,
  Method: null,
  PageIndex: 0,
  PageSize: 10
});

onMounted(() => {
  users.value = SystemUsersHelper.getAllUsers();
  bindList();
});


const refreshClick = () => {
  bindList();
}

const bindList = async () => {
  isLoading.value = true;
  try {
    searchData.PageIndex = pageNumber.value - 1;
    var list = JSON.parse(await HttpHelper.postJson(`${servicePath}/List`, searchData));


    total.value = list.Total;
    listDatas.value.splice(0, listDatas.value.length);
    listDatas.value.push(...list.Datas);

    if (listDatas.value.length == 0 && pageNumber.value > 1) {
      pageNumber.value--;
      bindList();
    }
  } catch (error) {
    Global.showError(error);
  }
  finally {
    isLoading.value = false;
  }
}


const handleSelectionChange = (selecteds: any[]) => {
  multipleSelection.value = selecteds;
}


const goSearch = () => {
  pageNumber.value = 1;
  bindList();
}
</script>
<template>
  <div class="page-view-main">
    <div style="padding: var(--page-padding);flex:1;min-height:0px;display: flex;flex-direction: column;">
      <div class="page-view-panel">
        <div style="display: flex;flex-direction: row;margin-bottom: 10px;">
          <div style="flex:1;">
            <el-date-picker v-model="searchData.Time" type="datetimerange" range-separator="至" start-placeholder="时间"
              end-placeholder="时间" style="margin-left: 5px;" />

            <el-select v-model="searchData.UserId" clearable placeholder="操作人" style="margin-left: 5px;width: 120px;">
              <el-option v-for="user in users" :key="user.id" :label="user.Name" :value="user.id" />
            </el-select>

            <el-input v-model="searchData.Controller" placeholder="控制器" @keypress.native.enter.prevent="goSearch"
              style="margin-left: 5px;width: 150px;" />
            <el-input v-model="searchData.Method" placeholder="方法名称" @keypress.native.enter.prevent="goSearch"
              style="margin-left: 5px;width: 150px;" />

            <el-button icon="Search" @click="goSearch" style="margin-left: 5px;"></el-button>
          </div>
          <div>
            <el-button-group class="ml-4">
              <el-button type="default" icon="Refresh" @click="refreshClick">刷新</el-button>
            </el-button-group>
          </div>
        </div>

        <el-table ref="multipleTableRef" @selection-change="handleSelectionChange" :data="listDatas"
          cell-class-name="tb-cell" header-cell-class-name="tb-header-cell" table-layout="auto" v-loading="isLoading"
          style="flex:1;min-height:0px;">
          <el-table-column type="expand">
            <template #default="props">
              <div m="4" v-html="props.row.Parameters" style="padding-left: 50px;">                
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="Time" label="时间" :formatter="Global.formatUTCToLocal" />
          <el-table-column prop="UserId" label="操作人" :formatter="Global.getUserName" />
          <el-table-column prop="Controller" label="控制器" />
          <el-table-column prop="Method" label="方法名称" />
        </el-table>
        <div>
          <Pagination @current-change="bindList" :total="total"
                    v-model:page-size="searchData.PageSize"  @size-change="refreshClick"
                        v-model:current-page="pageNumber" style="margin-top: 10px;" />
        </div>
      </div>
    </div>

  </div>
</template>
<style scoped lang="scss"></style>